/**
 * 函数组件
 * 
 * 组件类型
 * 组件属性(props), 包括可选属性
 * @returns
 */

import { FC } from "react";
import { Black } from "./testClass"
// 定义函数的参数列表
type Props = {
  name: string,
  age?: number
}
// 定义函数体
const TestFunc: FC<Props> = ({name, age}) => {
  return (
    <div>
      你好，我叫{name},我今年{age}岁了
    </div>
  )
}

// 定义函数体（新）
const TestFuncNew = ({name, age=22}: Props) => {
  return (
    <div>你好，我叫{name},我今年{age}岁了</div>
  )
}


function App() {
  return (
    <div>
      <TestFunc name={"black"} age={18}></TestFunc>
      <TestFuncNew name={"black"}></TestFuncNew>
      <Black name="FatherBlack" age={19}></Black>
    </div>
  );
}

export default App;
